<template>
  <div class="mapz">
      <div id="cesiumContainer"></div>
      <div class="searchDiv">
        <div class="searchwidth">
          <el-select v-model="value" filterable placeholder="请输入站点名称"  @change="handleSelectChange">
            <el-option
              v-for="item in stations"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="waringStyle">
          <span>站点情况：</span>
          <span>严重：{{first}}</span>
          <span>重要：{{second}}</span>
          <span>正常：{{three}}</span>
        </div>
      </div>
      <div class="h100" v-show="dialogTableVisible" >
        <div class="tanDiv"></div>
        <div  class="diaStyle">
        <div class="export">
          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div>
          <el-tabs v-model="activeName"  @tab-click="handleClick">
            <el-tab-pane label="严重" name="first"></el-tab-pane>
            <el-tab-pane label="重要" name="second"></el-tab-pane>
            <el-tab-pane label="一般" name="third"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <el-table :data="tableData"  ref="tableWaring" :header-cell-style="{ 'background-color': 'transparent' }" >
            <el-table-column property="xh" label="序号" width="150"></el-table-column>
            <el-table-column property="date" label="告警时间" width="150"></el-table-column>
            <el-table-column property="weizhi" label="告警位置" width="150"></el-table-column>
            <el-table-column property="waring" label="告警名称" width="150"></el-table-column>
            <el-table-column property="datelong" label="调度时长" width="200"></el-table-column>
            <el-table-column property="person" label="处理人"></el-table-column>
          </el-table>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";


export default {
  name: "mapz",
  data() {
    return {
      map:null,
      tdtVecLayer:null,
      tdtImgLayer:null,
      wordLayer:null,
      value:'',
      options: [{
        value: '1',
        label: '格雷1'
      }, {
        value: '2',
        label: '格雷2'
      }, {
        value: '3',
        label: '格雷3'
      }, {
        value: '4',
        label: '格雷4'
      }],
      first:'0',
      second:'0',
      three:'0',
      dialogTableVisible:false,
      tableData:[
        {
          xh:1,
          date:'2024-01-01',
          weizhi:'njshi',
          waring:'2121',
          datelong:'22',
          person:'大卫'

        },
        {
          xh:2,
          date:'2024-01-01',
          weizhi:'njshi',
          waring:'2121',
          datelong:'22',
          person:'大卫'

        },
        {
          xh:3,
          date:'2024-01-01',
          weizhi:'njshi',
          waring:'2121',
          datelong:'22',
          person:'大卫'

        },
        {
          xh:4,
          date:'2024-01-01',
          weizhi:'njshi',
          waring:'2121',
          datelong:'22',
          person:'大卫'

        },
        {
          xh:5,
          date:'2024-01-01',
          weizhi:'njshi',
          waring:'2121',
          datelong:'22',
          person:'大卫'

        },
        {
          xh:6,
          date:'2024-01-01',
          weizhi:'njshi',
          waring:'2121',
          datelong:'22',
          person:'大卫'

        },
      ],
      activeName:'first',

      stations:[
        {
          name:'中关村医疗器械园',
          value: '1',
          lng:'116.27',
          lat:'39.68',
        },
        {
          name:'北京军民结合产业园',
          value: '2',
          lng:'116.58',
          lat:'39.70',
        },{
          name:'格雷众创园',
          value: '3',
          lng:'116.3454263',
          lat:'39.7599227',
        },
      ],
    };
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap(){
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // 创建 Cesium 地球对象
      const viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        geocoder:false,
        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
      });

      // 将视角定位到指定坐标点
      const destination = Cesium.Cartesian3.fromDegrees(116.3454263,  39.7599227,1000); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(0); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-90); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      });


      const santaMonicaParcels = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/GLmap/MapServer", {
        token:apiKey
      });
      viewer.scene.imageryLayers.add(
        Cesium.ImageryLayer.fromProviderAsync(santaMonicaParcels)
      );

      // 将地点添加到Cesium地图上
      this.stations.forEach((station) => {
          const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat));
          // 创建实体并添加到地图上
          viewer.entities.add({
            position: position,
            billboard: {
              // 使用一个简单的图标作为标记
              image: '../../../src/assets/images/icon/stationz.png', // 替换为你的图标路径
              scale: 1.0,
              width: 30,//设置图片大小
              height: 40,//设置图片大小
              show: true,// 是否显示

            },
            label: {
              text: station.name,
              font: '14px font-family',
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              fillColor: Cesium.Color.YELLOW, // 设置标签填充颜色为黄色
              outlineWidth: 2,
              outlineColor: Cesium.Color.BLACK,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(0, -20) // 调整标签位置
            }
           });
          });


      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      // 添加点击事件监听器
      handler.setInputAction((click) => {

        // 获取点击位置的实体信息
        const pickedObject = viewer.scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id) {
          const entity = pickedObject.id;
          // 调用自定义的弹窗组件显示信息
          this.showInfoWindow(entity);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


    },
    // 自定义弹窗显示实体信息
    showInfoWindow(content) {
        // 在这里实现您自己的弹窗显示逻辑，可以是模态框、信息窗口等
      this.dialogTableVisible = true;
        // 示例代码仅在控制台打印信息
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.ckxxList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
    },
    //导出excel
    exportExcel() {
      const table = this.$refs.tableWaring;
      const wsData = [[]]; // Excel 表格数据

      const headerColumns = table.columns.map(column => column.label); // 表头数据
      wsData[0] = headerColumns;
      debugger
      // 遍历表格数据，将每行数据添加到 wsData 中
      table.data.forEach(row => {
        const rowData = Object.values(row);
        wsData.push(rowData);
      });
      //此处需要导入   npm install xlsx 库   页面引入  import XLSX from 'xlsx';
      const ws = XLSX.utils.aoa_to_sheet(wsData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 导出 Excel 文件
      XLSX.writeFile(wb, 'table_data.xlsx');
    },

  }
};
</script>

<style scoped lang="scss">
  .mapz{
    width: 100%;
    height: 100%;

    #cesiumContainer{
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 99;
    }

    .searchDiv{
      width: 34%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: fixed;
      top: 13%;
      left: 25%;
      z-index: 9999;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-evenly;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      .el-select .el-select-dropdown {
        z-index: 9999; /* 设置一个足够高的值 */
      }
      .searchwidth{
          width: 15rem;
        }
      .waringStyle{
        background-color: #004377;
        padding: 0.5rem 1rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        border-radius: 0.3rem;
        span{
          margin-left: 0.5rem;
          color: white;
          cursor: pointer;
        }
        span:nth-of-type(2){
          color: #E6307B;
        }
        span:nth-of-type(3){
          color: #ED6942;
        }
        span:nth-of-type(4){
          color: #00FEB5;
        }
      }

    }

    .h100{
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      .tanDiv{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #081F31;
        z-index: 999;
        opacity: 0.8;
      }
      .diaStyle{
        /* 修改弹框样式 */
        position: relative;
        width: 69rem;
        height: 32.7rem;
        background-image: url("../../assets/images/tankuang.png");
        background-size: contain; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        padding:3rem 4rem;
        z-index:9999;
        :deep(.el-tabs__item) {
          font-size: 1.2rem!important;
          color: white;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
        }
        :deep(.el-tabs__item.is-active) {
          color: #1890ff;
        }
        .el-table, :deep(.el-table tr){
          background-color: transparent!important;
        }
        .el-table thead {
          background-color: transparent;
        }
        :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
          color: white;
        }
         :deep(.el-table th.el-table__cell.is-leaf), :deep(.el-table td.el-table__cell){
          border-bottom: none;
          color: white;
        }
        :deep(.el-table tr:hover) {
          background-color: transparent !important;
        }
        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
          background-color: transparent !important;
        }
        .xx{
          width: 2rem;
          height: 2rem;
          position: absolute;
          top: -1rem;
          right: -1rem;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      }
    }
  }


</style>

